<template>
  <div>
    <videoPlay
      v-bind="videoOption"
      @timeupdate="onTimeUpdate"
      @loadstart="onLoadStart"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, defineProps } from "vue";
export default defineComponent({
  name: "Video",
});
</script>
<script lang="ts" setup>
// 引入
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import { videoOptionType } from "./ts/index";

const props = defineProps({
  videoOption: Object,
});

const videoOption = reactive<videoOptionType>({
  width: "", //播放器高度
  height: "", //播放器高度
  color: "", //主题色
  title: "", //视频名称
  src: "", //视频源
  muted: false, //静音
  webFullScreen: false, // 默认满屏
  speedRate: [], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0, //默认音量大小
  control: false, //是否显示控制
  currentTime: 0, //跳转到固定播放时间
  controlBtns: [], //显示所有按钮,
});

// 更新播放时间
const onTimeUpdate = (ev: any) => {
  console.log(ev);
  //播放实时更新播放时间并将时间传递给后端
};

// 客户端开始请求数据
const onLoadStart = (ev: any) => {
  console.log(ev);
  //重新打开该视频获取最后一次的播放时间，并赋值给ev.target.currentTime继续上次退出时观看
};
</script>

<style  scoped>
</style>